<template>
  <div class="client-home">
    <!-- 用户信息卡片 -->
    <div class="user-card">
      <div class="user-info">
        <div class="avatar">
          <img
src="@/assets/client-avatar.png" alt="头像" />
        </div>
        <div class="info">
          <h3>{{ userInfo.name }}</h3>
          <p>{{ userInfo.phone }}</p>
        </div>
      </div>
      <div class="user-stats">
        <div class="stat-item">
          <span class="value">{{ userInfo.contractCount }}</span>
          <span class="label">合同</span>
        </div>
        <div class="stat-item">
          <span class="value">{{ userInfo.caseCount }}</span>
          <span class="label">案件</span>
        </div>
      </div>
    </div>

    <!-- 通知栏 -->
    <div v-if="notice"
class="notice-bar">
      <img
src="@/assets/notice-icon.png" alt="通知" />
      <span>{{ notice }}</span>
      <button @click="closeNotice">×</button>
    </div>

    <!-- 快捷功能 -->
    <div class="quick-actions">
      <div
        v-for="(action, index) in quickActions"
        :key="index"
        class="action-item"
        @click="handleAction(action)"
      >
        <div class="icon">
          <img
:src="action.icon" :alt="action.name" />
        </div>
        <span>{{ action.name }}</span>
      </div>
    </div>

    <!-- 合同信息卡片 -->
    <div class="info-card">
      <div class="card-header">
        <h3>合同信息</h3>
        <router-link
to="/contracts" class="more-link">查看全部</router-link>
      </div>
      <div class="card-content">
        <div
          v-for="(contract, index) in contracts"
          :key="index"
          class="contract-item"
          @click="viewContract(contract)"
        >
          <div class="contract-info">
            <div class="title">
              {{ contract.title }}
            </div>
            <div class="meta">
              <span>合同编号: {{ contract.id }}</span>
              <span>签约日期: {{ contract.date }}</span>
            </div>
          </div>
          <div class="contract-status"
:class="contract.statusClass">
            {{ contract.status }}
          </div>
        </div>
      </div>
    </div>

    <!-- 案件信息卡片 -->
    <div class="info-card">
      <div class="card-header">
        <h3>案件信息</h3>
        <router-link
to="/cases" class="more-link">查看全部</router-link>
      </div>
      <div class="card-content">
        <div
          v-for="(caseItem, index) in cases"
          :key="index"
          class="case-item"
          @click="viewCase(caseItem)"
        >
          <div class="case-info">
            <div class="title">
              {{ caseItem.title }}
            </div>
            <div class="meta">
              <span>案件编号: {{ caseItem.id }}</span>
              <span>创建日期: {{ caseItem.date }}</span>
            </div>
          </div>
          <div class="progress">
            <div class="progress-bar">
              <div class="progress-inner"
:style="{ width: caseItem.progress + '%' }" />
            </div>
            <span class="progress-text">{{ caseItem.progress }}%</span>
          </div>
          <div class="case-status"
:class="caseItem.statusClass">
            {{ caseItem.status }}
          </div>
        </div>
      </div>
    </div>

    <!-- 最近消息 -->
    <div class="info-card">
      <div class="card-header">
        <h3>最近消息</h3>
        <router-link
to="/messages" class="more-link">查看全部</router-link>
      </div>
      <div class="card-content">
        <div
          v-for="(message, index) in messages"
          :key="index"
          class="message-item"
          @click="viewMessage(message)"
        >
          <div class="message-content">
            <div class="title">
              {{ message.title }}
            </div>
            <div class="time">
              {{ message.time }}
            </div>
          </div>
          <div v-if="!message.read"
class="unread-badge" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'

  const userInfo = ref({
    name: '张三',
    phone: '138****8000',
    contractCount: 3,
    caseCount: 2,
  })

  const notice = ref('您有一份合同即将到期，请注意查看')

  const quickActions = ref([
    { name: '合同查询', icon: '@/assets/contract-icon.png' },
    { name: '案件进度', icon: '@/assets/case-icon.png' },
    { name: '消息中心', icon: '@/assets/message-icon.png' },
    { name: '个人资料', icon: '@/assets/profile-icon.png' },
  ])

  const contracts = ref([
    {
      id: 'HT20250001',
      title: '技术服务协议',
      date: '2025-03-20',
      status: '生效中',
      statusClass: 'active',
    },
    {
      id: 'HT20250002',
      title: '软件开发合同',
      date: '2025-06-15',
      status: '待签约',
      statusClass: 'pending',
    },
  ])

  const cases = ref([
    {
      id: 'AJ20250001',
      title: '技术服务纠纷',
      date: '2025-05-10',
      status: '处理中',
      statusClass: 'processing',
      progress: 60,
    },
    {
      id: 'AJ20250002',
      title: '合同变更申请',
      date: '2025-08-05',
      status: '已完成',
      statusClass: 'completed',
      progress: 100,
    },
  ])

  const messages = ref([
    {
      id: 1,
      title: '您的合同HT20250001即将到期，请及时处理',
      time: '10分钟前',
      read: false,
    },
    {
      id: 2,
      title: '案件AJ20250001状态已更新为"处理中"',
      time: '2小时前',
      read: true,
    },
  ])

  const closeNotice = () => {
    notice.value = null
  }

  const handleAction = action => {
    console.log('点击快捷功能:', action.name)
  }

  const viewContract = contract => {
    console.log('查看合同:', contract)
  }

  const viewCase = caseItem => {
    console.log('查看案件:', caseItem)
  }

  const viewMessage = message => {
    message.read = true
    console.log('查看消息:', message)
  }
</script>

<style scoped lang="scss">
  .client-home {
    padding: 15px;

    .user-card {
      background: linear-gradient(135deg, #1989fa, #0960bd);
      border-radius: 10px;
      padding: 20px;
      color: white;
      margin-bottom: 15px;

      .user-info {
        display: flex;
        align-items: center;
        margin-bottom: 15px;

        .avatar {
          width: 60px;
          height: 60px;
          margin-right: 15px;

          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.3);
          }
        }

        .info {
          h3 {
            margin: 0 0 5px 0;
            font-size: 18px;
          }

          p {
            margin: 0;
            font-size: 14px;
            opacity: 0.8;
          }
        }
      }

      .user-stats {
        display: flex;

        .stat-item {
          flex: 1;
          text-align: center;

          .value {
            display: block;
            font-size: 24px;
            font-weight: bold;
          }

          .label {
            font-size: 14px;
            opacity: 0.8;
          }
        }
      }
    }

    .notice-bar {
      display: flex;
      align-items: center;
      background: #fff8e6;
      border-radius: 6px;
      padding: 10px 15px;
      margin-bottom: 15px;

      img {
        width: 16px;
        height: 16px;
        margin-right: 8px;
      }

      span {
        flex: 1;
        font-size: 14px;
        color: #fa8c16;
      }

      button {
        background: none;
        border: none;
        color: #999;
        font-size: 18px;
      }
    }

    .quick-actions {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-bottom: 15px;

      .action-item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .icon {
          width: 50px;
          height: 50px;
          background: #f5f5f5;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 8px;

          img {
            width: 24px;
            height: 24px;
          }
        }

        span {
          font-size: 12px;
          color: #666;
        }
      }
    }

    .info-card {
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      margin-bottom: 15px;
      overflow: hidden;

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        border-bottom: 1px solid #f0f0f0;

        h3 {
          margin: 0;
          font-size: 16px;
        }

        .more-link {
          font-size: 14px;
          color: #1989fa;
          text-decoration: none;
        }
      }

      .card-content {
        padding: 0 15px;

        .contract-item,
        .case-item,
        .message-item {
          padding: 15px 0;
          border-bottom: 1px solid #f0f0f0;

          &:last-child {
            border-bottom: none;
          }
        }

        .contract-item {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .contract-info {
            flex: 1;

            .title {
              font-size: 15px;
              font-weight: bold;
              margin-bottom: 5px;
            }

            .meta {
              font-size: 12px;
              color: #999;

              span {
                margin-right: 10px;
              }
            }
          }

          .contract-status {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;

            &.active {
              background: #e6f7ff;
              color: #1890ff;
            }

            &.pending {
              background: #fff7e6;
              color: #fa8c16;
            }

            &.expired {
              background: #fff1f0;
              color: #f5222d;
            }
          }
        }

        .case-item {
          .case-info {
            margin-bottom: 10px;

            .title {
              font-size: 15px;
              font-weight: bold;
              margin-bottom: 5px;
            }

            .meta {
              font-size: 12px;
              color: #999;

              span {
                margin-right: 10px;
              }
            }
          }

          .progress {
            display: flex;
            align-items: center;
            margin-bottom: 10px;

            .progress-bar {
              flex: 1;
              height: 6px;
              background: #f0f0f0;
              border-radius: 3px;
              margin-right: 10px;
              overflow: hidden;

              .progress-inner {
                height: 100%;
                background: #1989fa;
                border-radius: 3px;
              }
            }

            .progress-text {
              font-size: 12px;
              color: #666;
            }
          }

          .case-status {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;

            &.processing {
              background: #e6f7ff;
              color: #1890ff;
            }

            &.completed {
              background: #f6ffed;
              color: #52c41a;
            }

            &.pending {
              background: #fff7e6;
              color: #fa8c16;
            }
          }
        }

        .message-item {
          display: flex;
          align-items: center;
          position: relative;

          .message-content {
            flex: 1;

            .title {
              font-size: 14px;
              margin-bottom: 5px;
            }

            .time {
              font-size: 12px;
              color: #999;
            }
          }

          .unread-badge {
            width: 8px;
            height: 8px;
            background: #ff4d4f;
            border-radius: 50%;
          }
        }
      }
    }
  }
</style>
